<template>
    <div class="box">
        <div class="location_box">
        	<img class="location_icon" src="../../assets/footer/shxx3.png">
        	<div class="link">
        		<div class="linkname">联系人：{{ConsigneeInfo.Recipient}}</div>
        		<div class="linknumber">{{ConsigneeInfo.Mobile}}</div>
        	</div>
        	<div class="linkaddress">收货地址：{{ConsigneeInfo.Address}}</div>
        </div>
        <img class="bar" src="../../assets/icon/bar.png">
        <div class="order_coment">
        	<div style="overflow:hidden;">
        		<div class="order_num">拿货单：{{Code}}</div>
        		<button class="btn_copy">复制</button>
        	</div>
        	<div style="overflow:hidden;padding-top:10px;">
        		<div class="order_num">状态：<span style="color:red">{{Statu}}</span></div>
        		<div class="order_time">{{CreateTime}}</div>
        	</div>
        	<div style="overflow:hidden;" v-show='Buttonbool'>
	        	<div class="btn_box">
					<button @click='orderpay(item.action)' class="btn" :class='item.isPoint?"btn_warn":""' v-for='(item,idx) in Buttons' v-if='item.isEnable'>{{item.title}}</button>
				</div>
			</div>
        </div>
        <div class="pakage" v-show='PackageList.length > 0'>
        	<div class="goodtitlebox">
        		<img src="../../assets/icon/daishouhuo_red@3x.png" class="goodicon">
        		<div class="goodaddress">我的包裹：</div>
        	</div>
        	<div class="pakage_box" v-for='(item,idx) in PackageList'>
        		<div style="overflow:hidden;">
	        		<div class="order_num">拿货单：{{item.Code}}</div>
	        		<button class="btn_copy">复制</button>
        		</div>

        		<div style="overflow:hidden;padding-top:10px;">
	        		<div class="order_num">物流：{{item.Name}}</div>
	        		<div class="order_time">{{item.ShipTime}}</div>
	        	</div>

	        	<div style="overflow:hidden;padding-top:10px;">
	        		<div class="order_num">{{item.Summary}}</div>
	        		<button class="btn_copy warn" @click='Logistics(item.ShipID)'>已发商品/物流</button>
        		</div>
        	</div>
        </div>
        <div class="goodlist" v-for='(item1,idx1) in SenderList'>
    		<div class="goodtitlebox">
        		<img src="../../assets/icon/dp3.png" class="goodicon">
        		<div class="goodaddress">{{item1.Name}}</div>
        	</div>
        	<div class="list" v-for='(item2,idx2) in item1.ChildOrders'>
        		<div class="detail_title">
        			<div class="order_num">拿货单：{{item2.Code}}</div>
        			<button class="btn_copy">复制</button>
        		</div>
        		<div class="img_box">
        			<img class="detail_img" :src="item2.Cover" @click="GoItemDetail(item2.ItemID)">
        			<div class="detail_content" @click="GoItemDetail(item2.ItemID)">
        				<div class="title">{{item2.Title}}</div>
        				<div class="total_money">￥{{item2.Price}}</div>
        				<div class="total_money total_num">共{{item2.TotalQty}}件</div>
        				<div class="status_content">{{item2.Summary}}</div>
        			</div>
        			<div class="size_list" v-show='item2.Products.length > 0'>
        				<div class="color_size_qty" v-for='(item3,idx3) in item2.Products'>{{item3.Color}}/{{item3.Size}}/{{item3.Qty}} <span style="margin-left:15px;">{{item3.Summary}}</span></div>
        			</div>
        			<div class="btn_box">
        				<button @click='GoItem(item4.action,item2.ItemID,item2.OrderID,item4.data)' class="btn" :class='item4.isPoint?"btn_warn":""' v-for='(item4,idx4) in item2.Buttons' v-if='item4.isEnable'>{{item4.title}}</button>
        			</div>
        		</div>
        	</div>
    	</div>
    	<div class="footer_box">
    		<div class="foot_title">商品金额</div>
    		<div class="foot_money">{{ProductAmount}}</div>
    		<div class="foot_title">预付运费</div>
    		<div class="foot_money">{{PostFee}}<div class="weight">{{Weight}}</div> </div>
    		<div class="foot_title">优惠金额</div>
    		<div class="foot_money">{{DiscountAmount}}</div>
    		<div class="foot_total_num" v-show='ButtomLine1'>{{ButtomLine1}}</div>
    		<div class="foot_total_money" v-show='ButtomLine2'>{{ButtomLine2}}</div>
    		<div class="foot_total_return" v-show='ButtomLine3'>{{ButtomLine3}}</div>
    	</div>
    </div>
</template>

<script>
    const imgutil = require('../../common/until.js')
    import { Loadmore, Indicator, MessageBox, Toast } from 'mint-ui'
    export default {
        name: 'orderdetail',
        data () {
            return {
                id:this.$route.query.id,
                Buttonbool:false,
                ButtomLine1: '',
                ButtomLine2: '',
                ButtomLine3: '',
                SenderList: [],
                Code: '',
                CreateTime: '',
                DiscountAmount: '',
                PayableAmount: '',
                PostFee: '',
                ProductAmount: '',
                Statu: '',
                ConsigneeInfo: {},
                Buttons: [],
                PackageList: [],
                Weight: ''
            }
        },
        created: function () {
            this.init()
        },
        methods: {
            init: function(){
            	const that = this
            	Indicator.open()
            	that.$http('/pinhuobuyer/OrderDetailV2',{orderid:that.id},function(res){
            		Indicator.close()
            		if(res.Result){
            			let length = 0;
            			res.Data.Buttons.map(item => {
			                if (item.action == "联系客服" || item.action == "发货方式") {
			                    item.isEnable = false;
			                }
			                if (item.isEnable){
			                    length++;
			                }
			            })
			            if(length == 0){
			                that.Buttonbool = false;
			            } else {
			                that.Buttonbool = true;
			            }
			            res.Data.SenderList.map(item => {
			                item.ChildOrders.map(item1 => {
			                    item1.Cover = imgutil.getUrl(item1.Cover, 200);
			                    item1.Buttons.map(item2 => {
			                        if (item2.action == '已结算订单' || item2.action == '一键下图' || item2.action == '买家申请退款') {
			                            item2.isEnable = false;
			                        }
			                    })
			                })
			            })
			            that.Buttons = res.Data.Buttons
			            that.SenderList = res.Data.SenderList
            			that.ButtomLine1 = res.Data.BottomInfo.ButtomLine1
            			that.ButtomLine2 = res.Data.BottomInfo.ButtomLine2
            			that.ButtomLine3 = res.Data.BottomInfo.ButtomLine3
            			that.Weight = res.Data.Weight
            			that.PackageList = res.Data.PackageList
            			that.Code = res.Data.Code
            			that.CreateTime = res.Data.CreateTime
            			that.DiscountAmount = res.Data.DiscountAmount
            			that.PayableAmount = res.Data.PayableAmount
            			that.PostFee = res.Data.PostFee
            			that.ProductAmount = res.Data.ProductAmount
            			that.Statu = res.Data.Statu
            			that.ConsigneeInfo = res.Data.ConsigneeInfo
            			

            		}
            	},'GET')
            },
            orderpay: function(action){
            	const that = this
            	if(action == '买家取消'){

            		MessageBox({
                        title:'提示',
                        message: '是否确认取消订单',
                        showCancelButton: true,
                    }).then( tt => {
                        if(tt == 'confirm'){
                            Indicator.open()
                            that.$http('/pinhuoBuyer/orderv2/Cancel',{id:that.id},function(res){
                                Indicator.close()
                                if(res.Result){
                                    Toast('成功取消订单')
                                    that.init()
                                }else{
                                    Toast(res.Message)
                                }
                            },'POST')
                        }
                    })


            	}else if(action == '一键加入购物车'){
            		Indicator.open()
                    that.$http('/pinhuocart/AddItemFromOrder',{id:that.id},function(res){
                        Indicator.close()
                        if(res.Result){
                            MessageBox({
                                title:'提示',
                                message: '此笔订单的商品已经全部添加到拿货车了。您可以在拿货车对商品编辑后重新下单',
                                showCancelButton: true,
                                confirmButtonText:'拿货车'
                            }).then( tt => {
                                if(tt == 'confirm'){
                                    that.$router.push({ path: '/index/car'})
                                }
                            })
                        }else{
                            MessageBox({
                                title:'提示',
                                message: res.Message,
                                showCancelButton: false
                            })
                        }
                    },'POST')



            	}else if(action == '买家确认收货'){

            	}
            },
            GoItem: function(action,ItemID,OrderID,qsid){
            	const that = this
            	if(action == "补货"){
            		that.$router.push({path:'/itemdetail',query:{id:ItemID}})
            	}else if(action == "场次"){
            		that.$router.push({path:'/detail',query:{qsid:qsid}})
            	}else if(action == "买家取消"){
            		MessageBox({
                        title:'提示',
                        message: '是否确认取消订单',
                        showCancelButton: true,
                    }).then( tt => {
                        if(tt == 'confirm'){
                            Indicator.open()
                            that.$http('/pinhuoBuyer/orderv2/CancelOrder',{orderId:OrderID},function(res){
                                Indicator.close()
                                if(res.Result){
                                    Toast('成功取消订单')
                                    that.init()
                                }else{
                                    Toast(res.Message)
                                }
                            },'POST')
                        }
                    })
            	}
            },
            GoItemDetail: function(ItemID){
            	this.$router.push({path:'/itemdetail',query:{id:ItemID}})
            },
            Logistics: function(id){
                this.$router.push({path:'/logistics',query:{id:id}})
            }
        },
        components:{

        }
    }
</script>
<style scoped>
	.box{width: 100%;height: 100vh;background-color: #f5f5f5;overflow-y: scroll;}
    .location_box{width: 86%;padding: 10px 4% 5px 10%;background-color: #fff;position: relative;}
    .location_icon{width: 20px;height: 20px;top: 50%;left: 5%;margin-left: -10px;margin-top: -10px;position: absolute;}
    .link{width: 100%;overflow: hidden;height: 20px;line-height: 20px;padding: 5px 0;}
    .linknumber{float: right;}
    .linkname{float: left;}
    .linkaddress{width: 100%;line-height: 20px;}
    .bar{width: 100%;height: 4px;display: block;}
    .order_coment{background-color: #fff;padding: 10px 3%;width: 94%;font-size: 14px;color: #000;margin: 10px 0;overflow: hidden;}
    .order_num{height: 26px;line-height: 26px;float: left;}
    .btn_copy{float: right;font-size: 14px;line-height: 26px;color: #000;background-color: #f8f8f8;padding: 0 10px;border-radius: 6px;border: 1px solid #ddd;outline: transparent;}
    .order_time{float: right;height: 26px;line-height: 26px;}
    .pakage{margin-bottom: 10px;padding: 10px 0;background-color: #fff;}
    .goodtitlebox{background-color: #fff;padding: 10px 2%;width: 96%;height:26px;overflow: hidden;}
    .goodicon{width: 20px;height: 20px;float: left;margin-top: 4px;}
    .goodaddress{float: left;font-size: 14px;margin-left: 10px;height: 26px;line-height: 26px;}
    .warn{background-color: #E64340;color: #fff;}
    .pakage_box{width: 94%;padding: 5px 2% 10px 4%;overflow: hidden;font-size: 14px;border-bottom: 5px solid #f5f5f5;}
    .pakage_box:last-child{border-bottom: none;}
    .detail_title{width: 92%;padding: 10px 4%;overflow: hidden;color: #000;border-bottom: 1px solid #5eaffc;background-color: #fff;}
    .img_box{width: 92%;padding: 10px 4%;overflow: hidden;background-color: #fff;margin-bottom: 10px;}
    .detail_img{width: 20%;height: 90px;float: left;}
    .detail_content{float: right;width: 76%;overflow: hidden;}
    .title{width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;height: 20px;height: 20px;line-height: 20px;}
    .total_money{float: left;height: 26px;line-height: 26px;text-align: left;color: #b9b9b9;font-size: 14px;width: 50%;}
    .total_num{text-align: right;}
    .status_content{float: left;color: #fff;padding: 3px 3%;background-color: #20cb86;font-size: 14px;border-radius: 10px;}
    .size_list{margin-top:10px;width:100%;background-color:#efeff4;font-size:14px;color:#555;float:left;}
    .color_size_qty{padding: 8px 10px;}
    .btn_box{width: 100%;float: left;padding-top: 15px;text-align: right;background-color: #fff;}
    .btn{display: inline-block;margin-left: 15px;padding: 5px 10px;color: #000;background-color: #f8f8f8;border-radius: 6px;border: 1px solid #ddd;outline: transparent;}
    .btn_warn{background-color: #E64340;color: #fff;border-color: transparent;}
    .footer_box{width: 94%;padding: 10px 3%;background-color: #fff;overflow:hidden;}
    .foot_title{float: left;width: 50%;padding: 10px 0;height: 20px;line-height: 20px;text-align: left;}
    .foot_money {float: left;width: 50%;padding: 10px 0;height: 20px;line-height: 20px;text-align: right;position: relative;}
    .weight{position: absolute;right: 0;bottom: -5px;font-size: 10px;color: #555;}
    .foot_total_num{float: left;border-top: 1px solid #ddd;width: 100%;padding: 5px 0;font-size: 14px;color: #000;text-align: right;}
    .foot_total_money{float: left;padding: 5px 0;width: 100%;text-align: right;font-size: 15px;color: #000;}
    .foot_total_return{float: left;width: 100%;padding: 5px 0;font-size: 12px;color: #555;text-align: right;}
</style>
